﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js" use="validate,layer,elem"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">默认</h3>
    <form id="form1">
        <div class="row-aline">
            <label>预留正则,|运算</label>
            <input type="text" class="rayui-input" id="input1From1" datatype="m|e,*4-18" errormsg="请输入手机号或4-18位邮箱" sucmsg="输入正确^-^"/>
        </div>
        <div class="row-aline">
            <label>3-20个数字</label>
            <input type="text" class="rayui-input" datatype="n3-20" nullmsg="不可为空" />
        </div>
        <div class="row-aline">
            <label>自定义正则</label>
            <input type="text" class="rayui-input" datatype="/^[\u4e00-\u9fa5]{2,10}$/" errormsg="请输入2-10个汉字" />
        </div>
        <div class="row-aline">
            <label>datatype函数</label>
            <input type="text" class="rayui-input" datatype="chkform1" />
        </div>
        <div class="row-aline">
            <label></label>
            <input class="rayui-btn btn-primary" type="submit" value="提交" />
            <input type="button" class="rayui-btn btn-danger" value="调用函数设置错误" id="btnForm1ShowError" />
            <input type="button" class="rayui-btn btn-success" value="调用函数设置成功" id="btnForm1ShowSuc" />
            <input type="button" class="rayui-btn btn-warning" value="调用函数设置验证中" id="btnForm1ShowChking" />
            <input type="button" class="rayui-btn btn-info" value="隐藏提示语" id="btnForm1Hide" />
        </div>
    </form>

    <h3 class="spliter">recheck，验证成功时只显示图片</h3>
    <form id="form2">
        <div class="row-aline">
            <label>手机号</label>
            <input type="text" class="rayui-input" datatype="m" sucmsg="" />
        </div>
        <div class="row-aline">
            <label>请输入新密码</label>
            <input type="text" class="rayui-input" name="psw" datatype="n3-20" sucmsg="" />
        </div>
        <div class="row-aline">
            <label>再次输入新密码</label>
            <input type="text" class="rayui-input" datatype="*" recheck="psw" errormsg="两次密码不一致" sucmsg="" />
        </div>
        <div class="row-aline">
            <label>ajaxurl1</label>
            <input type="text" class="rayui-input" datatype="*" ajaxurl="/data.ashx?action=AjaxValidData" />
        </div>
        <div class="row-aline">
            <label>ajaxurl2</label>
            <input type="text" class="rayui-input" datatype="*" ajaxurl="/data.ashx?action=AjaxValidData" />
        </div>
        <div class="row-aline">
            <label></label>
            <input class="rayui-btn" type="reset" value="重置" />
            <input class="rayui-btn btn-primary" type="submit" value="提交" />
            <input type="button" class="rayui-btn btn-danger" value="调用函数check" id="btnForm2Check" />
            <input type="button" class="rayui-btn btn-success" value="其他按钮提交" id="btnForm2Post" />
            <input type="button" class="rayui-btn btn-warning" value="取消ajax验证" id="btnForm2AbortAjaxUrl" />
        </div>
    </form>

    <h3 class="spliter">不显示成功提示语，错误提示语在下方</h3>
    <form id="form3">
        <div class="row-aline">
            <label>手机号</label>
            <div class="row-content">
                <input type="text" class="rayui-input mobile chkGroup" datatype="m"/><br />
                <div class="validate_checktip">提示1</div>
            </div>
        </div>
        <div class="row-aline">
            <label>验证码</label>
            <div class="row-content">
                <input type="text" class="rayui-input chkGroup" datatype="n6-6" />
                <input class="rayui-btn btn-primary" type="button" value="获取短信码(只验证手机号)" id="btnForm3Sms"/>
                <br />
                <div class="validate_checktip">输入6位短信验证码</div>
            </div>
        </div>
        <div class="row-aline">
            <label>请输入新密码</label>
            <div class="row-content">
                <input type="text" class="rayui-input" name="psw" datatype="n3-20" />
                <input class="rayui-btn btn-primary" type="button" value="验证手机号和验证码" id="btnForm3SmsAndPsw" />
                <br />
                <div class="validate_checktip">提示2</div>
            </div>
        </div>
        <div class="row-aline">
            <label></label>
            <input class="rayui-btn btn-primary" type="submit" value="提交" />
        </div>
    </form>

    <h3 class="spliter">不显示验证图片，去除文本框样式</h3>
    <form id="form4">
        <div class="row-aline">
            <label>账户3-10</label>
            <input type="text" class="rayui-input" datatype="*" maxlength="10" />
        </div>
        <div class="row-aline">
            <label>请输入新密码</label>
            <input type="text" class="rayui-input" name="psw" datatype="n3-20" />
        </div>
        <div class="row-aline">
            <label>number增加maxlength</label>
            <input type="number" class="rayui-input" maxlength="10" />
        </div>
        <div class="row-aline">
            <label>函数内自定义datatype</label>
            <input type="text" class="rayui-input" name="aaaa" datatype="aaaa" />
        </div>
        <div class="row-aline">
            <label></label>
            <input class="rayui-btn btn-primary" type="submit" value="提交" />
        </div>
    </form>

<script>
    
    rayui.ready(function () {

        var validate = rayui.validate,
            layer = rayui.layer;

        //form1
        var form1Ins = validate.valid({
            elem: "#form1",
            datatype: {
                "chkform1": function (v, form, datatype) {
                    //datatype为系统内置正则，包括自定义datatype，这里需要注意datatype函数调用以免造成死循环
                    return v === "123" ? true : "输入123通过验证";
                }
            }
        });
        $("#btnForm1ShowError").click(function () {
            form1Ins.show("外部设置错误", 0, "#input1From1");
        });
        $("#btnForm1ShowSuc").click(function () {
            form1Ins.show("外部设置成功", 1, "#input1From1");
        });
        $("#btnForm1ShowChking").click(function () {
            form1Ins.show("外部设置验证中", 2, "#input1From1");
        });
        $("#btnForm1Hide").click(function () {
            form1Ins.hide($("#input1From1"));
        });


        //form2
        var form2Ins = validate.valid({
            elem: "#form2",
            ajaxurl: {
                success: function (data) {
                     
                },
                error: function (data) {
                     
                }
            }
        });
        $("#btnForm2Post").click(function () {
            var flag = form2Ins.check(true, "", true);

        });
        $("#btnForm2AbortAjaxUrl").click(function () {
            form2Ins.abortAjaxUrl();
        });
        
        

        //form3
        var form3Ins = validate.valid({
            elem: "#form3",
            tipType: 2,
            hideSucTip: true
        });
        var timerBtnSmsIns = $("#btnForm3Sms").timerBtn({timerText:"", auto:false, disabledClass: false});
        $("#btnForm3Sms").click(function () {
            if (form3Ins.check(true, ".mobile")) {
                timerBtnSmsIns.start();
            }
        });
        $("#btnForm3SmsAndPsw").click(function () {
            if (!form3Ins.check(true, ".chkGroup")) {
                layer.msg("验证失败", { timeout: 2000, shade:false });
            }
        });
        


        //form4
        var form4Ins = validate.valid({
            elem: "#form4",
            rightClass: false,
            tipImg: false,
            dataType: {
                "aaaa": /^abc$/
            },
            tipMsg: //提示语
            {
                dataTypeMsg: {
                    "aaaa": "输入abc通过验证"
                }
            }
        });

    });

</script>



    <div class="card">
        1、大量参照validform插件，提出ajax提交表单部分
        2、当使用下方提示时，建议写成div标签，获取这借助display:block样式控制整体高度，使用inline-block会有像素差
    </div>
    



    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：
调用方法 var validateIns = validate.valid(option);


绑定元素附加属性：
vtrim：数值是否去除两边的空格，默认不去除，添加后去除
datatype：只要验证类型，可选 预留正则(可扩展)|自定义正则|函数
ignore：是否允许空白，为空时不进行验证，配合datatype可实现非空验证，注意：和vtrim配合使用当输入空格时会验证为通过
nullmsg：为空时提示信息
errormsg：验证失败时提示信息
sucmsg：验证通过时提示信息


option属性：
elem://元素，一般为input输入框
btnSubmit: //字符串 提交按钮
btnReset://字符串 重置按钮
tipType: 1,//1：当前元素next；2：当前元素siblings；3：当前元素父级next；4：当前元素父级siblings；函数function(passed, info, form){
                //this为当前验证对象
                //passed:状态 0验证失败 1验证通过 2验证中
                //info为提示信息
                //form为当前表单
            }
datatype: //对象如：
    datatype:{
        "bankno": function(v, form, datatype){
                            //此时this为验证元素
                            //v：内容
                            //form：表单
                            //datatype：内置的正则表达式的引用，这里包含自定义的datatype，注意datatype函数调用以免造成死循环
                        }
        }
ignoreHidden: false,//是否忽略隐藏标签的验证
checkingImg: true,//是否显示检查中等待动画图片，true|false|url，全局，每个检查元素可通过自己的属性checkingimg修改
checkingTipDelay:300,//检查中提示延时显示时间，数值（单位毫秒），默认300，只要用于ajax校验，通过此参数可以优化体验，只有在ajax异步时有效
rightClass: true,//成功样式，true|false|css字符串，默认true
wrongClass: true,//失败样式，true|false|css字符串，默认true
hideSucTip: false,//当成功是隐藏提示，true|false，默认false
showAllError: false,//是否显示全部错误，true|false，默认false，当出现错误时不再继续向下验证
postOnce: false,//是否只允许提交一次
enterNext: true,//当按下回车时自动下一个表单，true|false，默认true
tipImg: true,//是否显示验证结果图片
        tipBottom: false,//tip提示是否在下边，true|false，默认false在右边，可以配合tipType参数实现任意位置展示
beforeCheck:function(),//检查前 当前this为form对象，return false阻止提交表单，return true或无返回提交表单
beforeSubmit:function(),表单提交前 当前this为form对象，return false阻止提交表单，return true或无返回提交表单
callback:function(data){
    //当前this为form对象
    1、当为ajax提交时，当ajax请求成功时，data为返回数据，当失败时data为ajax失败对象
    2、非ajax提交时，data无值，return false阻止提交表单，return true或无返回提交表单
    
},
ajaxPost: false,//是否ajax提交，默认false
ajaxData_Code: "ret",//ajax返回值，0表示验证通过
ajaxData_Msg: "msg"//ajax返回信息，提示语



validateIns对象方法：
ignore: function (selector) 忽略对所选择对象的验证，不传入selector则忽略所有表单元素
unignore: function (selector) 将ignore方法所忽略验证的对象重新获取验证效果，不传入selector则恢复验证所有表单元素
check: function (show, selector) 检查：show 是否显示提示 ，selector 检查控件
resetStatus: function () 重置表单状态
resetForm: function (firstFocus) 重置表单，firstFocus重置表单后是否选中第一个input
submitForm: function (skipCheck, url) 提交表单：skipCheck 是否跳过验证直接提交，当设为true时，不会触发beforeCheck回调，url提交地址或ajax参数对象
abort: function () 取消表单提交
abortAjaxUrl: function (selector) 取消ajax验证：selector 检查控件
show: function (info, type, selector) 显示提示： info 提示信息，type 类型 0失败 1成功 2检查中，selector 检查控件
hide: function (selector) 隐藏提示：selector 检查控件




ajaxurl返回json格式：{ ret: -1, msg: "错误提示"}
1、ret和msg可以通过ajaxData_Code和ajaxData_Msg参数进行修改，ret为0时表示通过验证，其他值表示验证失败
当验证通过时，msg如果有信息返回，前端提示msg信息，如果没有返回则获取前端提示语
2、默认请求是异步请求，可以通过参数进行设定，改为同步



全局参数：
options: //options属性
dataType: //内置正则表达式
                {
                   "*": /[\w\W]+/,
                    "*6-16": /^[\w\W]{6,16}$/,
                    "n": /^\d+$/,
                    "n6-16": /^\d{6,16}$/,
                    "s": /^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,
                    "s6-18": /^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,
                    "p": /^[0-9]{6}$/,
                    "m": /^1(3|4|5|6|7|8|9)\d{9}$/,
                    "e": /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
                    "url": /^(\w+:\/\/)?\w+(\.\w+)+.*$/
                }
tipMsg: //提示语
                {
                    dataTypeMsg: {
                        "*": "不能为空",
                        "*6-16": "请填写6到16位任意字符",
                        "n": "请填写数字",
                        "n6-16": "请填写6到16位数字",
                        "s": "不能输入特殊字符",
                        "s6-18": "请填写6到18位字符",
                        "p": "邮政编码格式不正确",
                        "m": "手机号码格式不正确",
                        "e": "邮箱地址格式不正确",
                        "url": "网址格式不正确"
                    },
                    undef: "datatype未定义",
                    ajax404: "检验地址异常",
                    nullMsg: "请输入信息",
                    errorMsg: "输入信息有误",
                    sucMsg: "信息通过验证",
                    recheckMsg: "两次输入的内容不一致",
                    checkingMsg: "正在检测信息…"
                }


内部变量
validate_lastval：最后校验值
validate_result：检验结果
validate_ajax：ajax对象





</pre>

</body>
</html>